#include("../../comm/FormHead.html")
<style>
    .menufirst{ color:green }
    .menusecond{ color:darkolivegreen }
    .menuthird{ color:#666666 }
    .menudesc{ color:red }
</style>
<input type="hidden" name="role_id" id="role_id" value="#(form.key)"/>
<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title" style="width: 100%;float:left">
        <li lay-event="EditSysRole"><i class="layui-icon layui-icon-tabs"></i> 编辑角色</li>
        <li class="layui-this"><i class="layui-icon layui-icon-list"></i> 角色菜单</li>
        <li lay-event="SetRoleActivity"><i class="layui-icon layui-icon-set-sm"></i> 角色功能</li>
        <li lay-event="SetRoleUser"><i class="layui-icon layui-icon-username"></i> 角色人员</li>
    </ul>
</div>
<div id="main" style="width:600px;display:flex">
    <div id="tree_1" class="demo-tree demo-tree-box" style="height:470px; overflow:auto;"></div>
    <div style="display:inline"></div>
</div>
<div class="layui-btn-container" style="width:500px;padding:10px;">
    <button type="button" class="layui-btn layui-btn-sm btn-change-13" data-type="getData">保存菜单</button>
    <button type="button" class="layui-btn layui-btn-sm ">重置</button>
</div>
<SCRIPT LANGUAGE="JavaScript">
    <!--

    layui.use(['myTree', 'myTool', 'util'], function () {
        layer.load();
        myTree = layui.myTree, myTool = layui.myTool;
        var $ = layui.$;
        treedata = #(form.data.tree);
        //树渲染
        treeindex = myTree.render({
            id: 'menutree',
            data: treedata, onlyIconControl: true, showCheckbox: true
        });

        layer.closeAll();

        layui.util.event("lay-event", {
            SetRoleUser: function () {
                location.href = "SetRoleUser?role_id=" + $("#role_id").val();
            },
            SetRoleActivity: function () {
                location.href = "SetRoleActivity?role_id=" + $("#role_id").val();
            },
            EditSysRole: function () {
                location.href = "EditSysRole?role_id=" + $("#role_id").val();
            }
        });

        layui.util.event("data-type", {
            getData: function () {
                var menuids = "|";
                var checkData = tree.getChecked('menutree');
                for (k = 0; k < checkData.length; k++) {
                    menuids += checkData[k].datas.menuid + "|";
                    if (checkData[k].children) {
                        grade2 = checkData[k].children;
                        for (l = 0; l < grade2.length; l++) {
                            menuids += grade2[l].datas.menuid + "|";
                            if (grade2[l].children) {
                                grade3 = grade2[l].children;
                                for (m = 0; m < grade3.length; m++) {
                                    menuids += grade3[m].datas.menuid + "|";
                                }
                            }
                        }
                    }
                }
                layui.myTool.postJson("SetRoleMenuApi", {roleid: $("#role_id").val(), menuids: menuids}, function (res) {
                    top.layer.closeAll();
                });
            }
        });
    });
    //-->
</SCRIPT>
</body>
</html>